<template>
  <MenuLogo v-if="!isCollapse"></MenuLogo>

  <!-- 4、default-active	页面加载时默认激活菜单的 index -->
  <el-menu
    :default-active="activeIdex"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#304156"
    @open="handleOpen"
    @close="handleClose"
    router
  ><!--1、router  是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 -->
    <MenuItem :menuList="menuList"></MenuItem>
  </el-menu>
</template>

<script setup lang="ts">
import MenuItem from "./MenuItem.vue";
import MenuLogo from "./MenuLogo.vue";
import { ref, reactive, computed } from "vue";
import { useRoute } from "vue-router";
import {useStore} from "../../store/index";

const store = useStore()

//2、获取当前路由
const route = useRoute()
//3、使用计算属性获取路由中的path
const activeIdex = computed(() => {
  const { path } = route;
  return path
})

//通过计算属性获取vuex中的Collapse
const isCollapse = computed(()=>{
  return store.getters['getCollapse']
})
let menuList = reactive([
  {
    path: "/dashboard",
    component: "Layout",
    meta: {
      title: '首页',
      chang:'home',
      icon: "HomeFilled",
      roles: ["sys:manage"],
    },
    children: [],
  },
  {
    path: "/system",
    component: "Layout",
    alwaysShow: true,
    name: "system",
    meta: {
      title: "系统管理",
      chang:'system',
      icon: "Menu",
      roles: ["sys:manage"],
      parentId: 0,
    },
    children: [
      /* {
        path: "/department",
        component: "/system/department/department",
        alwaysShow: false,
        name: "department",
        meta: {
          title: "机构管理",
          chang: 'department',
          icon: "ZoomOut",
          roles: ["sys:dept"],
          parentId: 17,
        },
      }, */
      {
        path: "/userList",
        component: "/system/User/UserList",
        alwaysShow: false,
        name: "userList",
        meta: {
          title: "用户管理",
          chang:'users',
          icon: "User",
          roles: ["sys:user"],
          parentId: 17,
        },
      },
      {
        path: "/roleList",
        component: "/system/Role/RoleList",
        alwaysShow: false,
        name: "roleList",
        meta: {
          title: "角色管理",
          chang:'roles',
          icon: "Setting",
          roles: ["sys:role"],
          parentId: 17,
        },
      },
      /* {
        path: "/menuList",
        component: "/system/Menu/MenuList",
        alwaysShow: false,
        name: "menuList",
        meta: {
          title: "权限管理",
          chang:'menuList',
          icon: "Stamp",
          roles: ["sys:menu"],
          parentId: 17,
        }, 
      }, */
    ],
  },
  {
    path: "/goods",
    component: "Layout",
    alwaysShow: true,
    name: "goods",
    meta: {
      title: "商品管理",
      chang:'goods',
      icon: "ShoppingCartFull",
      roles: ["sys:goods"],
      parentId: 0,
    },
    children: [
      {
        path: "/goodCategory",
        component: "/goods/goodsCategory/goodsCategoryList",
        alwaysShow: false,
        name: "goodCategory",
        meta: {
          title: "商品分类",
          chang:'categories',
          icon: "ShoppingBag",
          roles: ["sys:goodsCategory"],
          parentId: 34,
        },
      },
    ],
  },{
    path: "/systenConfig",
    component: "layout",
    alwaysShow: true,
    name: "systenConfig",
    meta: {
      title: "系统工具",
      chang:'systenConfig',
      icon: "SuitcaseLine",
      roles: ["sys:systenConfig"],
      parentId: 0
  },
  children: [
      {
        path: "/document",
        component: "/system/config/systemDocument",
        alwaysShow: false,
        name: "document",
        meta: {
          title: "接口文档",
          chang:'document',
          icon: "Link",
          roles: ["sys:document"],
          parentId: 42,
        },
      },
    ],
  }
]);

/* import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue"; */


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang='scss' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
.el-menu {
  border-right: none;
}

:deep(.el-sub-menu .el-sub-menu__title) {
  color: #f4f4f5 !important;
}
:deep(.el-menu .el-menu-item) {
  color: #bfcbd9;
}
/* 菜单 点中 文字的颜色 */
:deep(.el-menu-item.is-active) {
  color: #409eff !important;
}
/* 当前打开菜单的所有子菜单颜色 */
:deep(.is-opened .el-menu-item) {
  background-color: #1f2d3d !important;
}
/* 移动时的背景颜色 */
:deep(.el-menu-item:hover) {
  background-color: #001528 !important;
}
</style>